<template>
  <div id="dev-grid">
    <h4>异步加载</h4>
    <div class="dev-grid-row-wrap">
      <bf-row class="dev-grid-row">
        <bf-col class="dev-grid-row-col" v-for="colItem in colList" :key="colItem.id">
          <div class="dev-grid-col">{{colItem.name}}</div>
        </bf-col>
      </bf-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      colList: [],
    };
  },
  mounted() {
    this.setColList();
  },
  methods: {
    setColList() {
      setTimeout(() => {
        this.colList = [
          {
            id: 0,
            name: "name0",
          },
          {
            id: 1,
            name: "name1",
          },
          {
            id: 2,
            name: "name2",
          },
          {
            id: 3,
            name: "name3",
          },
        ];
      }, 2000);
    },
  },
};
</script>

<style lang="scss">
#dev-grid {
  width: 100%;
  height: 80vh;
  .dev-grid-row-wrap {
    width: 100%;
    height: 90px;
  }
  .dev-grid-col {
    padding: 30px 0;
    background-color: rgba(207, 33, 193, 0.8);
    color: #ffffff;
    text-align: center;
    font-size: 16px;
  }
  .dev-grid-row {
    margin: 10px 0;
    .dev-grid-row-col:nth-of-type(even) {
      .dev-grid-col {
        background-color: rgba(207, 33, 193, 0.5);
      }
    }
  }
}
</style>
